<%@ page import="com.zzw.utils.ShiroUtils" %><%--
Created by IntelliJ IDEA.
User: 您的名字
Version: 1.0
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>EasyUI CRUD 示例页面</title>
    <meta charset="UTF-8">
    <style>
        /* 初始隐藏头像对话框，防止闪烁 */
        #avatarDialog {
            display: none;
        }

        /* 头像下拉菜单样式 */
        .avatar-dropdown {
            position: fixed;
            top: 65px; /* 调整位置以适应更大的头像 */
            right: 20px;
            width: 140px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 3px 12px rgba(0,0,0,0.15);
            z-index: 9999;
            display: none;
            overflow: hidden;
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease;
        }

        .avatar-dropdown-item {
            padding: 12px 15px;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
            color: #333; /* 确保文字颜色清晰可见 */
        }

        .avatar-dropdown-item:hover {
            background-color: #f5f5f5;
            padding-left: 20px;
        }

        .avatar-dropdown-item i {
            margin-right: 8px;
            font-size: 16px;
            width: 16px;
            text-align: center;
        }

        .avatar-wrapper {
            position: relative;
            z-index: 9998;
            cursor: pointer;
        }

        /* 头像悬停效果 */
        .avatar-wrapper img {
            transition: transform 0.3s;
        }

        .avatar-wrapper:hover img {
            transform: scale(1.05);
        }

        /* 小箭头指示器 */
        .avatar-dropdown:before {
            content: '';
            position: absolute;
            top: -8px;
            right: 20px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid #fff;
        }

        /* 分隔线 */
        .avatar-dropdown-divider {
            height: 1px;
            background-color: #eee;
            margin: 0;
        }

        /* 增加加载动画 */
        .easyui-loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.8);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .easyui-loading:after {
            content: '';
            width: 40px;
            height: 40px;
            border: 5px solid #f3f3f3;
            border-radius: 50%;
            border-top: 5px solid #3498db;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        #userAvatar {
            cursor: pointer;
            width: 50px; /* 增加头像大小 */
            height: 50px; /* 增加头像大小 */
            border-radius: 50%;
            border: 2px solid #fff;
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }

        /* 增强头像悬停效果 */
        #userAvatar:hover {
            transform: scale(1.1);
            box-shadow: 0 0 10px rgba(255,255,255,0.5);
        }

        /* 菜单树样式优化 */
        .tree-node-hover {
            background-color: #f5f7fa;
            border-radius: 3px;
        }

        .menu-loading {
            width: 12px;
            height: 12px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            position: absolute;
            right: 5px;
            top: 50%;
            margin-top: -6px;
        }

        /* 树节点悬停文本颜色变化 */
        .tree-node-hover .tree-title {
            color: #1890ff;
        }

        /* 3D地球样式 */
        .globe-container {
            width: 100%;
            height: 100%;
            background-color: #000;
            overflow: hidden;
            position: relative;
        }

        .globe-chart {
            width: 100%;
            height: 100%;
            min-height: 500px;
        }

        .globe-title {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            font-size: 24px;
            z-index: 10;
            text-shadow: 0 0 5px rgba(0,0,0,0.5);
            font-weight: bold;
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }

        .globe-info {
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: white;
            font-size: 14px;
            z-index: 10;
            text-shadow: 0 0 5px rgba(0,0,0,0.5);
            text-align: right;
            background-color: rgba(0,0,0,0.3);
            padding: 10px;
            border-radius: 5px;
            max-width: 300px;
            line-height: 1.5;
        }

        /* 添加一些数据点样式 */
        .data-point {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: rgba(255,255,255,0.8);
            border-radius: 50%;
            box-shadow: 0 0 10px #fff;
            z-index: 5;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.5);
                opacity: 0.7;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
    </style>
    <base href="<%=request.getContextPath()%>/">
    <!-- 引入 EasyUI 的默认主题样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/bootstrap/easyui.css">
    <!-- 引入 EasyUI 的图标样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css">
    <!-- 引入 EasyUI 默认的 jQuery（无需单独引入 jQuery） -->
    <script src="static/js/easyui/jquery.min.js"></script>
    <!-- 引入 EasyUI 的核心 JS 文件 -->
    <script src="static/js/easyui/jquery.easyui.min.js"></script>
    <!-- 引入 EasyUI 的中文语言包 -->
    <script src="static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="static/js/owner/axios.min.js"></script>
    <script src="static/js/owner/common.js"></script>
    <!-- 新增上传组件样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/color.css">
    <!-- 引入 ECharts 图表库 -->
    <script src="static/js/owner/echarts.min.js"></script>
    <!-- 引入 ECharts GL 扩展 -->
    <script src="static/js/owner/echarts-gl.min.js"></script>
    <!-- 定义页面脚本 -->
    <script type="text/javascript">
        var $menuTree;
        // 定义ROOT_PATH用于存储资源路径
        var ROOT_PATH = 'static/assets/images';

        $(function () {
            $menuTree = $('#menuTree');

            // 初始化默认首页
            $('#centerTabs').tabs({
                fit: true, // 自适应布局
                border: false,
            });

            // 添加默认首页
            $('#centerTabs').tabs('add', {
                title: '主界面',// 首页 Tab 标题
                content: '<div class="globe-container">' +
                         '<div class="globe-title">3D全球可视化监控</div>' +
                         '<div class="globe-info">数据实时更新中...</div>' +
                         '<div id="globeChart" class="globe-chart"></div>' +
                         '</div>', // Tab 内容
                closable: false // 不允许关闭选项卡
            });

            // 初始化地球图表
            initGlobeChart();

            // 使用 EasyUI 的 tree 组件来渲染数据
            $menuTree.tree({
                url: 'menu/selectMenuNodeByUserId',
                animate: true, // 展开时添加动画效果
                dnd: false,    // 禁用拖放功能
                onlyLeafCheck: true, // 只在叶子节点显示复选框
                loadFilter: function (data) {
                    if (data && data.extend && data.extend.menus) {
                        return data.extend.menus;
                    }
                    // 如果数据格式不正确，返回空数据
                    return [];
                },
                onClick: function (node) {//点击事件, 不是点击小箭头
                    handleNodeClick(node);
                },
                onBeforeExpand: function (node) {
                    // 添加加载指示器
                    var $node = $(node.target);
                    var $loading = $('<div class="menu-loading"></div>');
                    $node.append($loading);
                },
                onExpand: function(node) {
                    // 移除加载指示器
                    $(node.target).find('.menu-loading').remove();

                    // 为新加载的节点添加悬停效果
                    addNodeHoverEffect();
                },
                onLoadSuccess: function() {
                    // 初始化树节点的悬停效果
                    addNodeHoverEffect();
                }
            });

            // 处理节点点击事件
            function handleNodeClick(node) {
                // 判断节点是否为父节点
                if (!node.url || (node.children && node.children.length > 0)) {
                    // 是父节点，切换展开/折叠状态
                    if (node.state === 'closed') {
                        $menuTree.tree('expand', node.target);
                    } else {
                        $menuTree.tree('collapse', node.target);
                    }
                    return;  // 父节点仅切换展开状态
                }

                // 叶子节点，动态添加选项卡
                addTab(node.text, node.url);
            }

            // 添加树节点悬停效果
            function addNodeHoverEffect() {
                $('.tree-node').hover(
                    function() {
                        $(this).addClass('tree-node-hover');
                    },
                    function() {
                        $(this).removeClass('tree-node-hover');
                    }
                );
            }

            // 添加手机号验证规则
            $.extend($.fn.validatebox.defaults.rules, {
                mobile: {
                    validator: function(value) {
                        return /^1[3-9]\d{9}$/.test(value);
                    },
                    message: '请输入有效的手机号码'
                }
            });

            // 添加密码确认验证规则
            $.extend($.fn.validatebox.defaults.rules, {
                equals: {
                    validator: function(value, param){
                        return value == $(param[0]).val();
                    },
                    message: '两次输入的密码不一致'
                }
            });

        });

        // 子节点-动态添加选项卡
        function addTab(title, url) {
            let tabs = $('#centerTabs');
            if (tabs.tabs('exists', title)) {
                tabs.tabs('select', title); // 如果选项卡已存在，直接选中

                let tab = tabs.tabs('getTab', title); // 获取选项卡对象
                let iframe = tab.find('iframe'); // 查找iframe元素
                if (iframe.length > 0) {
                    // 重新加载iframe的内容，重新设置src属性
                    iframe.attr('src', url);
                }
            } else {
                tabs.tabs('add', {
                    title: title,
                    content: createFrame(url), // 创建 iframe 作为内容
                    closable: true // 允许关闭选项卡
                });
            }
        }

        // 创建 iframe
        function createFrame(url) {
            return `<iframe id="iframe" src="${url}" frameborder="0" style="width:100%;height:100%;"></iframe>`;
        }

        // 处理文件选择
        function handleFileSelect(fileInput) {
            if (fileInput.files && fileInput.files[0]) {
                // 显示进度条
                $('#uploadProgress').progressbar({value:0}).show();

                // 创建FormData对象
                var formData = new FormData();
                formData.append('avatar', fileInput.files[0]);

                // 创建图片预览
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#largeAvatar').attr('src', e.target.result);
                }
                reader.readAsDataURL(fileInput.files[0]);

                // 模拟上传进度
                var progress = 0;
                var timer = setInterval(function() {
                    progress += 10;
                    $('#uploadProgress').progressbar('setValue', progress);
                    if (progress >= 100) {
                        clearInterval(timer);
                    }
                }, 200);

                // 发送ajax请求
                $.ajax({
                    url: 'sysUser/uploadAvatar',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        // 完成进度条
                        $('#uploadProgress').progressbar('setValue', 100);

                        setTimeout(function() {
                            $('#uploadProgress').hide();
                        }, 500);

                        if(res.code == 200) {
                            // 更新头像显示
                            $('#userAvatar').attr('src', res.extend.avatarUrl);
                            $('#largeAvatar').attr('src', res.extend.avatarUrl);
                            $.messager.show({
                                title: '成功',
                                msg: '头像更新成功',
                                timeout: 2000,
                                showType: 'slide'
                            });
                        } else {
                            $.messager.alert('错误',res.msg);
                        }
                    },
                    error: function() {
                        $('#uploadProgress').hide();
                        $.messager.alert('错误','网络错误，请稍后重试');
                    }
                });
            }
        }

        // 打开头像对话框
        function openAvatarDialog() {
            $('#avatarDialog').dialog('open');
        }

        function reload(id) {
            // 获取树组件
            var tree = $menuTree.tree('options');
            if (!tree) {
                console.error("无法获取菜单树实例");
                return;
            }

            if (id) {
                // 如果提供了节点ID，获取指定节点的 DOM 对象
                var node = $menuTree.tree('find', id);
                if (node && node.target) {
                    // 刷新指定节点
                    $menuTree.tree('reload', node.target);
                } else {
                    console.warn("找不到ID为 " + id + " 的节点，将刷新整个树");
                    $menuTree.tree('reload');
                }
            } else {
                // 否则刷新整个树
                $menuTree.tree('reload');
            }
        }


        // 保存用户信息
        function saveUserInfo() {
            // 表单验证
            if(!$('#userInfoForm').form('validate')) {
                return;
            }

            // 获取表单数据
            var formData = {
                id: $('#userId').val(),
                nickname: $('#nickname').textbox('getValue'),
                email: $('#email').textbox('getValue'),
                mobilePhone: $('#mobilePhone').textbox('getValue'),
                gender: $('#gender').combobox('getValue'),
            };

            // 发送请求
            $.ajax({
                url: 'sysUser/updateUserInfo',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(res) {
                    if(res.code == 200) {
                        $.messager.alert('成功', '个人信息更新成功');
                    } else {
                        $.messager.alert('错误', res.msg || '更新失败');
                    }
                },
                error: function() {
                    $.messager.alert('错误', '网络错误，请稍后重试');
                }
            });
        }

        // 重置用户信息
        function resetUserInfo() {
            loadUserInfoToForm();
            $.messager.show({
                title: '提示',
                msg: '表单已重置',
                timeout: 1500,
                showType: 'fade'
            });
        }

        // 加载用户信息到表单
        function loadUserInfoToForm() {
            axios({
                url: 'sysUser/getCurrentUser',
                method: 'get',
                params: {
                    userId: <%=ShiroUtils.getUserId()%>
                }
            }).then(res => {
                if(res.data.code == 200) {
                    var user = res.data.extend.user;
                    $('#userId').val(user.id);
                    $('#username').textbox('setValue', user.username);
                    $('#nickname').textbox('setValue', user.nickname);
                    $('#email').textbox('setValue', user.email);
                    $('#mobilePhone').textbox('setValue', user.mobilePhone);
                    $('#gender').combobox('setValue', user.gender);

                    // 设置个人信息卡片
                    $('#userDisplayName').text(user.nickname || user.username);
                    $('#userEmailDisplay').text(user.email || '未设置');
                    $('#userPhoneDisplay').text(user.mobilePhone || '未设置');

                    // 根据性别设置称谓
                    var genderText = user.gender == '1' ? '女士' : '先生';
                    var roleName = '普通用户 · ' + genderText;
                    $('#userRole').text(roleName);

                    // 设置加入时间
                    if(user.createTime) {
                        var createDate = new Date(user.createTime);
                        $('#userJoinTime').text('注册时间: ' + formatDate(createDate));
                    }
                } else {
                    $.messager.alert('错误', '获取用户信息失败');
                }
            })
        }

        // 修改密码
        function changePassword() {
            if(!$('#securityForm').form('validate')) {
                return;
            }

            var oldPassword = $('#oldPassword').passwordbox('getValue');
            var newPassword = $('#newPassword').passwordbox('getValue');

            axios({
                url: 'sysUser/changePassword',
                method: 'POST',
                data: {
                    oldPassword: oldPassword,
                    newPassword: newPassword
                },
            }).then(function(res) {
                if(res.data.code === 200) {
                    $.messager.show({
                        title: '成功',
                        msg: '密码修改成功，请重新登录',
                        timeout: 2000,
                        showType: 'slide'
                    });

                    // 清空密码表单
                    $('#securityForm').form('clear');
                } else {
                    $.messager.alert('错误', res.msg || '密码修改失败');
                }
            }).catch(function(err) {
                $.messager.alert('错误', '网络错误，请稍后重试');
            })
        }


        // 初始化头像对话框
        $(function() {
            $('#avatarDialog').dialog({
                closed: true,
                modal: true,
                border: false,
                shadow: true,
                draggable: true,
                resizable: false,
                closable: true,
                collapsible: false,
                maximizable: false,
                minimizable: false,
                onBeforeOpen: function() {
                    // 设置大头像的src为当前头像
                    var currentSrc = $('#userAvatar').attr('src');
                    $('#largeAvatar').attr('src', currentSrc);

                    // 加载用户信息
                    loadUserInfoToForm();
                }
            });

            // 获取DOM元素
            var avatarWrapper = document.getElementById('avatarWrapper');
            var dropdown = document.getElementById('avatarDropdown');
            // 定义hideTimeout变量
            var hideTimeout;

            // 添加动画效果
            function showDropdown() {
                // 先设置透明度为0
                dropdown.style.opacity = '0';
                dropdown.style.display = 'block';

                // 添加过渡动画
                setTimeout(function() {
                    dropdown.style.opacity = '1';
                    dropdown.style.transform = 'translateY(0)';
                }, 10);
            }

            function hideDropdown() {
                dropdown.style.opacity = '0';
                dropdown.style.transform = 'translateY(-10px)';

                // 等待动画结束后隐藏
                setTimeout(function() {
                    dropdown.style.display = 'none';
                }, 300);
            }

            // 美化确认对话框样式
            function handleLogout() {
                $.messager.confirm({
                    title: '确认退出',
                    msg: '<div style="padding:20px 0 10px;text-align:center;"><i class="icon-question-sign" style="font-size:24px;color:#ff9800;margin-bottom:10px;display:block;"></i>您确定要退出登录吗？</div>',
                    fx: 'fade',
                    border: 'thin',
                    fn: function(r) {
                        if (r) {
                            // 显示loading效果
                            $('body').append('<div id="logoutLoading" class="easyui-loading" style="display:block;"></div>');

                            // 调用登出接口
                            axios.get('sysUser/logout')
                                .then(function(response) {
                                    $('#logoutLoading').remove();
                                    var res = response.data;
                                    if(res.code == 200) {
                                        $.messager.show({
                                            title: '提示',
                                            msg: '<div style="text-align:center;padding:10px;"><i class="icon-ok" style="color:green;font-size:16px;margin-right:5px;"></i>退出登录成功，即将跳转到登录页面</div>',
                                            timeout: 2000,
                                            showType: 'slide',
                                            style: {
                                                right: '',
                                                top: document.body.scrollTop + document.documentElement.scrollTop,
                                                bottom: ''
                                            }
                                        });

                                        // 两秒后跳转到登录页
                                        setTimeout(function() {
                                            window.location.href = 'login';
                                        }, 2000);
                                    } else {
                                        $('#logoutLoading').remove();
                                        $.messager.alert('错误', res.msg || '退出失败');
                                    }
                                })
                                .catch(function(error) {
                                    $('#logoutLoading').remove();
                                    $.messager.alert('错误', '网络错误，请稍后重试');
                                });
                        }
                    }
                });
            }

            // 修改鼠标悬停显示下拉菜单的逻辑
            avatarWrapper.addEventListener('mouseenter', function() {
                showDropdown();
                clearTimeout(hideTimeout); // 清除任何可能存在的隐藏计时器
            });

            // 点击头像也显示下拉菜单
            avatarWrapper.addEventListener('click', function(e) {
                e.stopPropagation(); // 阻止冒泡
                if (dropdown.style.display === 'none' || dropdown.style.display === '') {
                    showDropdown();
                }
                // 移除点击时隐藏菜单的逻辑
            });

            // 点击头像外区域隐藏下拉菜单
            document.addEventListener('click', function(e) {
                if (!avatarWrapper.contains(e.target) && !dropdown.contains(e.target)) {
                    hideDropdown();
                }
            });

            // 下拉菜单也可以悬停
            dropdown.addEventListener('mouseenter', function() {
                clearTimeout(hideTimeout);
            });

            // 修改头像区域移出逻辑 - 只有当不在头像区域和下拉菜单区域才隐藏
            avatarWrapper.addEventListener('mouseleave', function() {
                hideTimeout = setTimeout(function() {
                    if (!dropdown.matches(':hover')) {
                        hideDropdown();
                    }
                }, 300);
            });

            dropdown.addEventListener('mouseleave', function() {
                // 只有当鼠标不在头像区域时才隐藏下拉菜单
                if (!avatarWrapper.matches(':hover')) {
                    hideTimeout = setTimeout(hideDropdown, 300);
                }
            });

            // 添加点击头像直接打开个人信息对话框的功能
            $('#userAvatar').click(function(e) {
                // 防止事件冒泡，避免触发下拉菜单
                e.stopPropagation();
                // 打开个人信息对话框
                openAvatarDialog();
            });

            // 点击个人中心
            document.getElementById('profileItem').addEventListener('click', function() {
                openAvatarDialog();
                hideDropdown();
            });

            // 点击登出选项
            document.getElementById('logoutItem').addEventListener('click', function() {
                handleLogout();
                hideDropdown();
            });
        });

        function formatDigit(num) {
            return num < 10 ? '0' + num : num;
        }

        function updateTime() {
            var now = new Date();
            var year = now.getFullYear();
            var month = formatDigit(now.getMonth() + 1);
            var day = formatDigit(now.getDate());
            var hour = formatDigit(now.getHours());
            var min = formatDigit(now.getMinutes());
            var sec = formatDigit(now.getSeconds());

            var weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var weekDay = weekDays[now.getDay()];

            var timeStr = year + '年' + month + '月' + day + '日 ' + weekDay + ' ' + hour + ':' + min + ':' + sec;
            document.getElementById('timeDisplay').innerHTML = timeStr;

            setTimeout(updateTime, 1000);
        }

        // 实时时间更新脚本
        $(function() {
            updateTime();

            // 随机更新天气显示（仅作演示用）
            var weatherTypes = ['晴朗', '多云', '小雨', '阴天'];
            var temps = [22, 24, 26, 28, 30];
            var randomWeather = weatherTypes[Math.floor(Math.random() * weatherTypes.length)];
            var randomTemp = temps[Math.floor(Math.random() * temps.length)];
            $('#weatherInfo span').text(randomWeather + ' ' + randomTemp + '°C');
        });

        // 初始化3D地球图表
        function initGlobeChart() {
            // 等待DOM完全加载
            $(document).ready(function() {
                setTimeout(function() {
                    // 初始化ECharts实例
                    var myChart = echarts.init(document.getElementById('globeChart'));

                    // 配置项
                    var option = {
                        backgroundColor: '#000',
                        globe: {
                            baseTexture: ROOT_PATH + '/code/world.topo.bathy.200401.jpg',
                            heightTexture: ROOT_PATH + '/code/world.topo.bathy.200401.jpg',
                            displacementScale: 0.04,
                            shading: 'realistic',
                            environment: ROOT_PATH + '/code/starfield.jpg',
                            realisticMaterial: {
                                roughness: 0.9
                            },
                            postEffect: {
                                enable: true
                            },
                            light: {
                                main: {
                                    intensity: 5,
                                    shadow: true
                                },
                                ambientCubemap: {
                                    texture: ROOT_PATH + '/code/pisa.hdr',
                                    diffuseIntensity: 0.2
                                }
                            },
                            viewControl: {
                                autoRotate: true, // 自动旋转
                                autoRotateSpeed: 10, // 旋转速度
                                rotateSensitivity: 1, // 旋转灵敏度
                                zoomSensitivity: 1, // 缩放灵敏度
                                panSensitivity: 1, // 平移灵敏度
                                distance: 150 // 距离
                            },
                            layers: [
                                {
                                    type: 'blend',
                                    blendTo: 'emission',
                                    texture: ROOT_PATH + '/code/world.topo.bathy.200401.jpg'
                                }
                            ]
                        }
                    };

                    // 使用配置项设置图表
                    myChart.setOption(option);

                    // 窗口大小变化时，调整图表大小
                    $(window).resize(function() {
                        myChart.resize();
                    });

                    // 适配选项卡切换
                    $('#centerTabs').tabs({
                        onSelect: function() {
                            setTimeout(function() {
                                myChart.resize();
                            }, 100);
                        }
                    });

                    // 添加点击事件
                    myChart.on('click', function(params) {
                        console.log('地球被点击:', params);
                        // 这里可以添加点击地球时的交互效果
                    });

                    // 更新地球信息显示
                    updateGlobeInfo();
                }, 300);
            });
        }

        // 更新地球信息显示
        function updateGlobeInfo() {
            var infoElement = $('.globe-info');

            // 模拟实时更新数据
            setInterval(function() {
                var date = new Date();
                var timeStr = date.toLocaleTimeString();
                var randomData = Math.floor(Math.random() * 1000);

                infoElement.html('当前时间: ' + timeStr + '<br>数据流量: ' + randomData + ' GB/s');
            }, 1000);
        }
    </script>

</head>
<body style="width:100%; height:100%; padding: 0; margin: 0;">
<div id="app" class="easyui-layout" style="width:100%; height:100%">

    <div data-options="region:'north'" style="height:50px">
        <!-- 北部区域新设计：包含系统标题、时间显示和头像 -->
        <div style="display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0 20px; background: linear-gradient(to right, #2c3e50, #4ca1af); color: white;">
            <!-- 左侧：系统标题 -->
            <div style="display: flex; align-items: center;">
                <h2 style="margin: 0; font-size: 22px; letter-spacing: 1px;">企业管理系统</h2>
            </div>

            <!-- 中间：实时时间显示 -->
            <div id="currentDateTime" style="font-size: 16px; display: flex; align-items: center;">
                <i class="icon-time" style="margin-right: 8px; font-size: 18px;"></i>
                <span id="timeDisplay"></span>
            </div>

            <!-- 右侧：头像和用户信息 -->
            <div style="display: flex; align-items: center;">
                <!-- 天气信息占位 -->
                <div id="weatherInfo" style="margin-right: 20px; font-size: 15px;">
                    <i class="icon-cloud" style="margin-right: 5px;"></i>
                    <span>晴朗 26°C</span>
                </div>

                <!-- 通知图标 -->
                <div style="margin-right: 20px; cursor: pointer; position: relative;">
                    <i class="icon-bell" style="font-size: 18px;"></i>
                    <span class="badge" style="position: absolute; top: -8px; right: -8px; background-color: #ff5252; color: white; border-radius: 50%; width: 16px; height: 16px; font-size: 12px; display: flex; align-items: center; justify-content: center;">5</span>
                </div>

                <!-- 头像和下拉菜单 -->
                <div id="avatarWrapper" class="avatar-wrapper">
                    <img id="userAvatar"
                         style="width:50px; height:50px; border-radius:50%; cursor:pointer; border: 2px solid #fff; box-shadow: 0 0 5px rgba(0,0,0,0.2); transition: all 0.3s ease;">

                    <!-- 头像下拉菜单 -->
                    <div id="avatarDropdown" class="avatar-dropdown">
                        <div id="profileItem" class="avatar-dropdown-item">
                            <i class="icon-user"></i>
                            <span>个人中心</span>
                        </div>
                        <div id="logoutItem" class="avatar-dropdown-item">
                            <i class="icon-signout"></i>
                            <span>退出登录</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <%-- 头像对话框 --%>
        <div id="avatarDialog" title="个人信息" style="width:900px;height:600px;padding:0;">
            <div class="easyui-layout" data-options="fit:true">
                <!-- 左侧头像上传区域 -->
                <div data-options="region:'west',split:true" style="width:400px;padding:20px;background:#f9f9f9;">
                    <div style="text-align:center; position:relative;margin-top:15px;">
                        <img id="largeAvatar" style="width:280px;height:280px;object-fit:cover;border-radius:8px;box-shadow:0 0 15px rgba(0,0,0,0.2);cursor:pointer;" onclick="document.getElementById('fileInput').click()">

                        <!-- 添加悬停效果 -->
                        <div class="avatar-hover" style="position:absolute;top:0;left:50%;transform:translateX(-50%);width:280px;height:280px;background:rgba(0,0,0,0.5);color:white;opacity:0;transition:opacity 0.3s;border-radius:8px;display:flex;align-items:center;justify-content:center;"
                             onmouseover="this.style.opacity=1"
                             onmouseout="this.style.opacity=0"
                             onclick="document.getElementById('fileInput').click()">
                            <div>
                                <i class="icon-camera" style="font-size:48px;display:block;margin-bottom:10px;"></i>
                                <span style="font-size:16px;">点击更换头像</span>
                            </div>
                        </div>
                    </div>
                    <input type="file" id="fileInput" style="display:none;" accept="image/*" onchange="handleFileSelect(this)">

                    <!-- 上传进度条 -->
                    <div id="uploadProgress" class="easyui-progressbar" style="width:100%;margin-top:20px;display:none;"></div>

                    <!-- 个人信息卡片 - 调整宽度和样式 -->
                    <div class="easyui-panel" style="margin-top:25px;padding:15px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.1);width:100%;box-sizing:border-box;">
                        <div style="text-align:center;font-size:22px;font-weight:bold;margin-bottom:15px;color:#333;" id="userDisplayName">用户名</div>
                        <div style="color:#666;text-align:center;margin-bottom:10px;font-size:16px;" id="userRole">普通用户</div>
                        <div style="color:#999;text-align:center;font-size:15px;" id="userJoinTime">注册时间: 2023-01-01</div>
                        <div style="margin-top:15px;border-top:1px solid #eee;padding-top:15px;display:flex;justify-content:space-around;">
                            <div>
                                <div style="text-align:center;font-size:14px;color:#999;">邮箱</div>
                                <div style="text-align:center;font-size:15px;color:#333;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;" id="userEmailDisplay">user@example.com</div>
                            </div>
                            <div>
                                <div style="text-align:center;font-size:14px;color:#999;">手机</div>
                                <div style="text-align:center;font-size:15px;color:#333;margin-top:5px;" id="userPhoneDisplay">13800138000</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧个人信息编辑区域 -->
                <div data-options="region:'center'" style="padding:20px;background:#fff;">
                    <div class="easyui-tabs" style="width:100%;height:100%;">
                        <div title="基本信息" style="padding:15px;">
                            <form id="userInfoForm" method="post">
                                <input type="hidden" id="userId" name="id">
                                <div style="margin-bottom:20px">
                                    <label for="nickname" style="display:inline-block;width:80px;font-size:14px;">昵称：</label>
                                    <input id="nickname" name="nickname" class="easyui-textbox" style="width:260px;height:32px;" data-options="prompt:'请输入昵称',required:true,missingMessage:'昵称不能为空'">
                                </div>
                                <div style="margin-bottom:20px">
                                    <label for="username" style="display:inline-block;width:80px;font-size:14px;">用户名：</label>
                                    <input id="username" name="username" class="easyui-textbox" style="width:260px;height:32px;" data-options="readonly:true,iconCls:'icon-lock'">
                                </div>
                                <div style="margin-bottom:20px">
                                    <label for="email" style="display:inline-block;width:80px;font-size:14px;">邮箱：</label>
                                    <input id="email" name="email" class="easyui-textbox" style="width:260px;height:32px;" data-options="prompt:'请输入邮箱',validType:'email',invalidMessage:'邮箱格式不正确'">
                                </div>
                                <div style="margin-bottom:20px">
                                    <label for="mobilePhone" style="display:inline-block;width:80px;font-size:14px;">手机号：</label>
                                    <input id="mobilePhone" name="mobilePhone" class="easyui-textbox" style="width:260px;height:32px;" data-options="prompt:'请输入手机号',validType:'mobile',invalidMessage:'手机号格式不正确'">
                                </div>
                                <div style="margin-bottom:20px">
                                    <label for="gender" style="display:inline-block;width:80px;font-size:14px;">性别：</label>
                                    <select id="gender" name="gender" class="easyui-combobox" style="width:260px;height:32px;" data-options="editable:false,panelHeight:'auto'">
                                        <option value="0">男</option>
                                        <option value="1">女</option>
                                    </select>
                                </div>
                                <div style="text-align:center;margin-top:30px;">
                                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="saveUserInfo()" style="width:120px;height:36px;padding:5px 0;" iconCls="icon-save">保存</a>
                                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="resetUserInfo()" style="width:120px;height:36px;padding:5px 0;margin-left:20px;" iconCls="icon-undo">重置</a>
                                </div>
                            </form>
                        </div>
                        <div title="安全设置" style="padding:15px;">
                            <form id="securityForm" method="post">
                                <div style="margin-bottom:20px">
                                    <label for="oldPassword" style="display:inline-block;width:100px;font-size:14px;">当前密码：</label>
                                    <input id="oldPassword" name="oldPassword" class="easyui-passwordbox" style="width:260px;height:32px;" data-options="prompt:'请输入当前密码',required:true,showEye:true">
                                </div>
                                <div style="margin-bottom:20px">
                                    <label for="newPassword" style="display:inline-block;width:100px;font-size:14px;">新密码：</label>
                                    <input id="newPassword" name="newPassword" class="easyui-passwordbox" style="width:260px;height:32px;" data-options="prompt:'请输入新密码',required:true,showEye:true">
                                </div>
                                <div style="margin-bottom:20px">
                                    <label for="confirmPassword" style="display:inline-block;width:100px;font-size:14px;">确认密码：</label>
                                    <input id="confirmPassword" name="confirmPassword" class="easyui-passwordbox" style="width:260px;height:32px;" data-options="prompt:'请再次输入新密码',required:true,showEye:true,validType:'equals[\'#newPassword\']'">
                                </div>
                                <div style="text-align:center;margin-top:30px;">
                                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="changePassword()" style="width:120px;height:36px;padding:5px 0;" iconCls="icon-lock">修改密码</a>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- 添加关闭按钮 -->
                    <div style="position:absolute;top:10px;right:10px;">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#avatarDialog').dialog('close')" style="width:32px;height:32px;" data-options="plain:true,iconCls:'icon-cancel'"></a>
                    </div>
                </div>
            </div>
        </div>

        <%-- 原有下拉框保持不变 --%>
        <%--<div>--%>
        <%--    <select id="orgId" name="orgId" style="position: absolute;--%>
        <%--    top: 8px;--%>
        <%--    right: 18px;--%>
        <%--    height: 40px;--%>
        <%--    width: 181px;--%>
        <%--    text-align: center;">--%>
        <%--        <option value="1">北京</option>--%>
        <%--        <option value="2">上海</option>--%>
        <%--        <option value="3">广州</option>--%>
        <%--        <option value="4">深圳</option>--%>
        <%--    </select>--%>
        <%--</div>--%>
    </div>

    <div data-options="region:'west'" title="系统功能列表" style="width:250px;">
        <!-- 树形菜单 -->
        <div class="easyui-panel" style="padding: 5px; height: 100%; overflow: hidden;">
            <ul id="menuTree" class="easyui-tree"></ul>
        </div>
    </div>

    <div data-options="region:'center'">
        <!-- 中心区域变为 Tabs 组件 -->
        <div id="centerTabs" class="easyui-tabs"></div>
    </div>
</div>
<script src="static/js/owner/vue.js"></script>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            sysUser: {}
        },
        methods: {
        },
        mounted() {
            // 初始化时加载用户头像
            axios({
                url: 'sysUser/getCurrentUser',
                method: 'get',
                params: {
                    userId: <%=ShiroUtils.getUserId()%>
                }
            }).then(res => {
                if(res.data.code == 200) {
                    this.sysUser = res.data.extend.user;
                    $('#userAvatar').attr('src', res.data.extend.user.avatar || 'static/image/default-avatar.jpg');
                }
            })
        }
    });
</script>
</body>
</html>
